<template>
	<div class="login disflex ju_cen align-it-cen">
		<n-form ref="loginFormRef" :model="loginForm" class="loginForm" :rules="rules">
			<div class="loginForm-title">
				<h2>{{ $t("login.title") }}</h2>
				<div class="lang curpot">
					<Lang class="lang-icon" color="#fff"></Lang>
				</div>
			</div>
			<n-tabs
				class="tabs tab-text-color"
				:default-value="state.tabsValue"
				size="large"
				justify-content="space-evenly"
				@update:value="state.tabsValue = $event"
			>
				<n-tab-pane name="userpwd" :tab="$t('login.userpwd')">
					<n-form-item path="username" size="small">
						<n-input
							v-model:value="loginForm.username"
							class="input"
							:placeholder="$t('login.username')"
							clearable
						>
							<template #prefix>
								<n-icon size="22"><User /></n-icon>
							</template>
						</n-input>
					</n-form-item>
					<n-form-item path="password" size="small">
						<n-input
							v-model:value="loginForm.password"
							class="input"
							type="password"
							:placeholder="$t('login.password')"
							clearable
							show-password-on="click"
						>
							<template #prefix>
								<n-icon size="22"><LockClosed16Regular /></n-icon>
							</template>
						</n-input>
					</n-form-item>
				</n-tab-pane>
				<n-tab-pane name="userphone" :tab="$t('login.userphone')">
					<n-form-item ref="userPhoneFormItemRef" path="userphone" size="small">
						<n-input
							v-model:value="loginForm.userphone"
							class="input"
							:placeholder="$t('login.phone')"
							clearable
						>
							<template #prefix>
								<n-icon size="22"><PhoneAndroidSharp /></n-icon>
							</template>
						</n-input>
					</n-form-item>
					<n-grid :x-gap="20">
						<n-gi :span="16">
							<n-form-item path="code" size="small">
								<n-input
									v-model:value="loginForm.code"
									class="input"
									:placeholder="$t('login.code')"
									clearable
								>
									<template #prefix>
										<n-icon size="22">
											<i class="np-icon-yanzhengma"></i>
										</n-icon>
									</template>
								</n-input>
							</n-form-item>
						</n-gi>
						<n-gi :span="8">
							<n-button class="getcode" type="primary" @click="getCode">
								{{
									state.countdown === -1
										? $t("login.getcode")
										: `${state.countdown}s`
								}}
							</n-button>
						</n-gi>
					</n-grid>
				</n-tab-pane>
			</n-tabs>
			<n-form-item>
				<n-space
					style="width: 100%; justify-content: space-between"
					item-style="display: flex;align-items: center;"
					align="center"
				>
					<div class="automatic-login">
						<n-checkbox v-model:checked="state.automaticLogin" class="text-color">
							{{ $t("login.autologin") }}
						</n-checkbox>
					</div>
					<n-button type="default" text class="text-color">
						{{ $t("login.forgotpwd") }}
					</n-button>
				</n-space>
			</n-form-item>
			<n-form-item>
				<n-button :loading="loading" class="submit" type="primary" @click="submit">
					{{ $t("login.button") }}
				</n-button>
			</n-form-item>
		</n-form>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import LockClosed16Regular from "@vicons/fluent/LockClosed16Regular";
import PhoneAndroidSharp from "@vicons/material/PhoneAndroidSharp";
import User from "@vicons/tabler/User";
import { useRouter } from "@/router";
import { useStore } from "@/store";
import { Lang } from "@/lang";
import { useI18n } from "@/lang";
import { checkMobile } from "@/util/validata";
import { user } from "@/api";
import { useTabs } from "@/hooks";

interface LoginConfig {
	timer: undefined | number | NodeJS.Timer;
	countdown: number;
	tabsValue: "userpwd" | "userphone";
	automaticLogin: boolean;
}

const { t: $t } = useI18n();
const router = useRouter();
const store = useStore();
const { init } = useTabs();

const loginFormRef = ref();
const userPhoneFormItemRef = ref();
const loading = ref(false);

const loginForm = reactive({
	username: "admin",
	password: "123456",
	userphone: "",
	code: "",
});

const state = reactive<LoginConfig>({
	timer: undefined,
	countdown: -1,
	tabsValue: "userpwd",
	automaticLogin: false,
});

const rules = {
	username: {
		required: true,
		validator(rule: any, value: string) {
			if (!value) {
				return new Error($t("login.unameReq"));
			}
			return true;
		},
		trigger: ["input", "blur"],
	},
	password: [
		{
			required: true,
			validator(rule: any, value: string) {
				if (!value) {
					return new Error($t("login.pwdReq"));
				} else if (value.length < 6) {
					return new Error($t("login.pwdError"));
				}
				return true;
			},
			trigger: ["input", "blur"],
		},
	],
	userphone: [
		{
			required: true,
			validator(rule: any, value: string) {
				if (!value) {
					return new Error($t("login.phoneReq"));
				} else if (!checkMobile(value)) {
					return new Error($t("login.phoneError"));
				}
				return true;
			},
			trigger: ["input", "blur"],
		},
	],
	code: [
		{
			required: true,
			validator(rule: any, value: string) {
				if (!value) {
					return new Error($t("login.codeReq"));
				} else if (value.length < 6) {
					return new Error($t("login.codeError"));
				}
				return true;
			},
			trigger: ["input", "blur"],
		},
	],
};

function getCode() {
	if (state.countdown > 0) return;
	userPhoneFormItemRef.value.validate("input", (valid: Array<any>) => {
		console.log(valid);
		if (!valid) {
			state.countdown = 60;
			state.timer = setInterval(() => {
				state.countdown--;
				if (state.countdown <= 0) {
					state.countdown = -1;
					clearInterval(state.timer as number);
					state.timer = undefined;
				}
			}, 1000);
		}
	});
}

function submit() {
	loginFormRef.value.validate(async (valid: Array<any>) => {
		if (!valid) {
			loading.value = true;
			try {
				const { code, data, info } = await user.login(loginForm);
				if (code === 200) {
					init();
					await store.dispatch("user/LOGIN", data);
					await router.push("/");
					loading.value = false;
					window.$notification.success({
						title: info,
						content: "欢迎回来：vue-naive-admin",
						duration: 3000,
					});
				}
			} catch ({ info }) {
				window.$message.error(info as string);
			}
			loading.value = false;
		}
	});
}
</script>

<style lang="scss" scoped>
.login {
	width: 100%;
	height: 100vh;
	background-color: #2d3a4b;
	overflow: hidden;
}
.loginForm {
	width: 550px;
	padding: 35px;
}
.loginForm-title {
	text-align: center;
	color: #fff;
	margin-bottom: 40px;
	position: relative;
}
.automatic-login {
	color: #fff;
	span {
		margin-left: 5px;
	}
}
.lang {
	position: absolute;
	right: 0;
	top: 0;
	width: 20px;
	height: 20px;
}
.submit {
	width: 100%;
}
.getcode {
	width: 100%;
	height: 43px;
	margin-top: 1px;
}
:deep(.n-form-item) {
	--label-height: 0 !important;
}
:deep(.n-input) {
	--border: none !important;
	--border-hover: none !important;
	--border-focus: none !important;
	--box-shadow-focus: none !important;
	--caret-color: #fff !important;

	border-radius: 6px;
	height: 45px;
	line-height: 45px;
	.n-input-wrapper {
		// border: 1px solid hsla(0, 0%, 100%, 0.1);
		border: 1px solid hsla(0, 0%, 100%, 0.1);
		border-radius: 5px;
	}
	.n-input-wrapper,
	.n-input__input-el {
		background-color: rgb(40, 52, 67);
		color: #fff;
	}
}
</style>
